<template>
  <!-- 容器 -->
  <div class="warpper main">
    <div class="flex-box">
      <div class="main-banner bgWhite" v-lazy:background-image="backgroundImage"></div>
      <div class="main-article-list">
        <slot name="content"></slot>
      </div>
    </div>
    <div class="slider slider-right">
      <SliderUser />
      <SliderContact />
      <SliderNewArticle />
      <SliderCommont />
      <SliderClassify />
    </div>

  </div>
</template>


<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
@Component({})
export default class extends Vue {
  backgroundImage: string = "https://qn.itliuyang.com/bannerG.jpg";
  created() {}
}
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  &-banner {
    height: 280px;
    margin-bottom: 10px;
    // background-image: url();
    background-size: cover;
    background-position: center;
  }
  .slider-right {
    width: 300px;
    margin-left: 10px;
  }
  .main-article {
    display: flex;
    .slider-left {
      width: 280px;
      margin-right: 10px;
    }
    .main-article-list {
      flex: 1;
    }
  }
  .flex-box {
    flex: 1;
  }
}
</style>